<template>
  <div style="width: 100%; height: 100%; padding-bottom: 20px;">
    <div style="background-color: #eeeff6; width: 100%; height: 100px;">
      <!-- 步骤条 -->
      <el-steps
        style="width: 1020px; position: relative; top: 20px;"
        :active="activeStep"
        align-center
      >
        <el-step
          v-for="(step, index) in steps"
          :key="index"
          :title="step.title"
          :class="{ 'now-step': nowStep === index + 1 && nowStep < activeStep+1 }"
          @click="setActiveStep(index)"
        />
      </el-steps>
    </div>
    <!-- 滚动容器（添加 ref="scrollContainer"） -->
    <div
      ref="scrollContainer"
      class="scroll-container"
      style="
        width: 100%;
        height: calc(100% - 100px);
        position: absolute;
        top: 100px;
        margin-bottom: 20px;
        overflow-y: auto;
      "
    >
      <div class="content-wrapper">
        <Information1 v-if="nowStep === 1" @toNextStep="ToNextStep" />
        <Information2 v-if="nowStep === 2" @toNextStep="ToNextStep" />
        <Information3 v-if="nowStep === 3" @toNextStep="ToNextStep" />
        <Information4 v-if="nowStep === 4" @toNextStep="ToNextStep" />
        <Information5 v-if="nowStep === 5" @toNextStep="ToNextStep" />
        <Information6 v-if="nowStep === 6" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Information1 from "./Step2/Information1.vue";
import Information2 from "./Step2/Information2.vue";
import Information3 from "./Step2/Information3.vue";
import Information4 from "./Step2/Information4.vue";
import Information5 from "./Step2/Information5.vue";
import Information6 from "./Step2/Information6.vue";

const activeStep = ref(0);
const nowStep = ref(1);
const scrollContainer = ref<HTMLElement | null>(null);
const steps = [
  { title: "知识点解析" },
  { title: "课程互动设计" },
  { title: "时间分配" },
  { title: "个性化题目生成" },
  { title: "图片资料生成" },
  { title: "PPT生成" },
];

// 点击步骤切换
function setActiveStep(index: number) {
  console.log('点击前:', { nowStep: nowStep.value, activeStep: activeStep.value, clickedIndex: index });

  // 如果是已完成的步骤或当前步骤
  if (index <= activeStep.value) {
    let a=activeStep.value
    nowStep.value = index + 1;
    if (index === activeStep.value) {
      ElMessage("跳转当前步骤");
    }
    // if(index===0){
    //   activeStep.value=a
    // }
    console.log({ nowStep: nowStep.value, activeStep: activeStep.value });
    return;
  }
  
  // 如果是未完成的步骤
  console.log('准备弹出确认对话框'); // 调试日志
  ElMessageBox.confirm(
    "当前或之前步骤还未生成，是否直接跳转当前步骤?",
    "",
    {
      confirmButtonText: "跳转",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
  .then(() => {
    console.log('用户确认跳转'); // 调试日志
    nowStep.value = index + 1;
    activeStep.value = index;
  })
  .catch((e) => {
    console.log('用户取消跳转', e); // 调试日志
    ElMessage({ type: "info", message: "取消跳转" });
  })
  .finally(() => {
    console.log('对话框已关闭', { nowStep: nowStep.value, activeStep: activeStep.value }); // 调试日志
  });

  nextTick(() => {
    console.log('DOM更新后:', {
      activeStep: activeStep.value,
      nowStep: nowStep.value
    });
  });
}

// 自动下一步
function ToNextStep(index: number) {
  nowStep.value = index;
  activeStep.value = index - 1;
}
</script>

<style scoped>
/* 当前步骤的样式 */
::v-deep.now-step .el-step__head.is-process {
  border-color: rgb(114, 221, 114);
  color: rgb(114, 221, 114);
}
::v-deep.now-step .el-step__icon {
  color: rgb(114, 221, 114);
  border-color: rgb(114, 221, 114);
}
::v-deep.now-step .el-step__title {
  color: rgb(114, 221, 114);
}

/* 滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 6px;
  background-color: #f3f4f8;
}

.scroll-container::-webkit-scrollbar-track {
  background: #e3e6e9e3;
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #c2d0df;
  border-radius: 6px;
}

.scroll-container::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0;
}
</style>